<template>
  <div
    :class="['fixed z-[1000] top-0 left-0 w-full h-full bg-black bg-opacity-90', isDragging ? 'cursor-grabbing' : 'cursor-grab']"
    @wheel.prevent="handleWheel"
    @mousedown="handleMouseDown"
    @click="handleClick"
  >
    <!-- Header -->
    <div class="absolute top-5 left-5 right-5 flex justify-between items-center bg-black bg-opacity-70 px-4 py-2.5 rounded text-white text-base z-[1001]">
      <span>{{ title }}</span>
      <button
        class="bg-transparent border-0 text-white text-2xl cursor-pointer p-0 m-0 w-8 h-8 flex items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-opacity-30"
        @click.stop="$emit('close')"
      >
        &times;
      </button>
    </div>

    <!-- Zoom Info -->
    <div class="absolute top-[70px] left-5 bg-black bg-opacity-70 text-white px-3 py-2 rounded text-sm z-[1001]">
      缩放: {{ Math.round(currentZoom * 100) }}%
    </div>

    <!-- Image Content -->
    <div
      class="w-[90%] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[90%] max-h-[90%] transition-transform duration-100"
      :style="contentStyle"
    >
      <img
        :src="imageUrl"
        alt="查看图片"
        class="w-full h-full object-contain select-none"
        style="-webkit-user-drag: none"
        @load="handleImageLoad"
      />
    </div>

    <!-- Controls -->
    <div class="absolute bottom-5 left-1/2 -translate-x-1/2 flex gap-2.5 bg-black bg-opacity-70 px-4 py-2.5 rounded-[25px] z-[1001]">
      <button
        class="bg-white bg-opacity-20 border-0 text-white px-3 py-2 rounded cursor-pointer text-sm flex items-center gap-1 hover:bg-opacity-30"
        @click.stop="resetZoom"
      >
        🔍 重置缩放
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImageModal',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    imageUrl: {
      type: String,
      required: true
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      currentZoom: 1,
      translateX: 0,
      translateY: 0,
      isDragging: false,
      lastX: 0,
      lastY: 0
    }
  },
  computed: {
    contentStyle() {
      return {
        transform: `translate(-50%, -50%) translate(${this.translateX}px, ${this.translateY}px) scale(${this.currentZoom})`
      }
    }
  },
  mounted() {
    this.setupEventListeners()
  },
  beforeDestroy() {
    this.removeEventListeners()
  },
  methods: {
    handleWheel(event) {
      const delta = event.deltaY > 0 ? 0.9 : 1.1
      const newZoom = this.currentZoom * delta
      if (newZoom >= 0.1 && newZoom <= 10) {
        this.currentZoom = newZoom
      }
    },
    handleMouseDown(event) {
      const modal = event.currentTarget
      if (event.target === modal || event.target.id === 'modalContent' || event.target.tagName === 'IMG') {
        this.isDragging = true
        this.lastX = event.clientX
        this.lastY = event.clientY
        event.preventDefault()
      }
    },
    handleMouseMove(e) {
      if (this.isDragging) {
        const deltaX = e.clientX - this.lastX
        const deltaY = e.clientY - this.lastY
        this.translateX += deltaX
        this.translateY += deltaY
        this.lastX = e.clientX
        this.lastY = e.clientY
      }
    },
    handleMouseUp() {
      if (this.isDragging) {
        this.isDragging = false
      }
    },
    handleClick(event) {
      if (event.target.classList.contains('modal') || event.currentTarget === event.target) {
        this.$emit('close')
      }
    },
    resetZoom() {
      this.currentZoom = 1
      this.translateX = 0
      this.translateY = 0
    },
    handleImageLoad() {
      const modalImage = this.$el.querySelector('img')
      if (!modalImage || !modalImage.naturalWidth) return
      const containerWidth = window.innerWidth * 0.9
      const containerHeight = window.innerHeight * 0.9
      const imageWidth = modalImage.naturalWidth
      const imageHeight = modalImage.naturalHeight
      const scaleX = containerWidth / imageWidth
      const scaleY = containerHeight / imageHeight
      this.currentZoom = Math.min(scaleX, scaleY, 1)
      this.translateX = 0
      this.translateY = 0
    },
    handleKeydown(e) {
      if (!this.show) return
      switch (e.key) {
        case 'Escape':
          this.$emit('close')
          break
        case '+':
        case '=':
          this.currentZoom = Math.min(this.currentZoom * 1.2, 10)
          break
        case '-':
          this.currentZoom = Math.max(this.currentZoom * 0.8, 0.1)
          break
        case '0':
          this.resetZoom()
          break
        case 'f':
        case 'F':
          this.handleImageLoad()
          break
      }
      e.preventDefault()
    },
    setupEventListeners() {
      document.addEventListener('mousemove', this.handleMouseMove)
      document.addEventListener('mouseup', this.handleMouseUp)
      document.addEventListener('keydown', this.handleKeydown)
    },
    removeEventListeners() {
      document.removeEventListener('mousemove', this.handleMouseMove)
      document.removeEventListener('mouseup', this.handleMouseUp)
      document.removeEventListener('keydown', this.handleKeydown)
    }
  }
}
</script>

